<template>
	<view class="container">
		<view class="tabs">
			<text 
				:class="{ active: currentTab === 'login' }" 
				@tap="switchTab('login')"
			>登录</text>
			<text 
				:class="{ active: currentTab === 'register' }" 
				@tap="switchTab('register')"
			>注册</text>
		</view>

		<view v-if="currentTab === 'login'" class="form">
		    <input v-model="loginData.username" placeholder="请输入用户名" />
		    <input v-model="loginData.password" type="password" placeholder="请输入密码" password />
		    <button style="margin-bottom: 30rpx;" @click="loginapp">登录</button>
		    <button style="margin-bottom: 40rpx;" open-type="getPhoneNumber" @getphonenumber="getAuth">手机号码授权登录</button>
		</view>

		<view v-else class="form">
			<input v-model="registerData.username" placeholder="请输入用户名" />
			<input v-model="registerData.password" type="password" placeholder="请输入密码" password />
			<input v-model="registerData.phone"  placeholder="请输入电话号码"  />
			<!-- <input v-model="registerData.role" type="role" placeholder="请选择角色"  /> -->
			<view class="form-item">
			  <text>请选择角色：</text>
			  <radio-group @change="handleRoleChange">
			    <label class="radio-item" v-for="role in roles" :key="role.value">
			      <radio :value="role.value" :checked="registerData.role === role.value" /> {{ role.label }}
			    </label>
			  </radio-group>
			</view>
			<button @click="handleRegister">注册</button>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onMounted } from 'vue';
import { login,register,code1} from '@/pages/utils/api/UsersAPI.js'
import { useUserStore  } from'@/stores/api.js'

const userStore = useUserStore ();

const getAuth = (event) => {
    console.log("回调信息", event);
    // 获取事件详情（如用户授权信息）
    let { detail } = event;
	shuju.value.encryptedData=detail.encryptedData;
	shuju.value.iv=detail.iv;
	

    uni.login({
        provider: 'weixin',
		
        univerifyStyle: {
            fullScreen: true,
            // 可选：自定义 logo、按钮样式等
        },
		
		success(res) {
			
			shuju.value.code=res.code;
			sendCodeToServer(shuju.value);
		},
    })
};
const sendCodeToServer=(code)=>{
	code1(code).then(res=>{
		if(res.code==577){
		
		uni.showModal({
		        title: '警告',
		        content: '用户不存在，请注册',
		        showCancel: false,

		      });
			  switchTab('register');
		}else if(res.code==200){
			
			uni.showModal({
			        title: '登录成功',
			        content: '登录成功',
			        showCancel: false,
			      });
				  uni.switchTab({
				    url: '/pages/main/index'
				  });
			
		}
	})
	
}

const handleRegister=()=>{
	register(registerData.value).then(res=>{
		console.log(res)
		if(res.code==200){
			uni.showToast({
			    title: '注册成功',
			    icon: 'success',
			    duration: 1500
			});
			switchTab('login');
			
			
		}else{
			uni.showToast({
			    title: '失败',
			    icon: 'error',
			    duration: 1500
			});
			
		}
	})
}
const loginapp=  () =>{
      try {
     login(loginData.value).then(res=>{
		 console.log(res.data);
		 userStore.setUserInfo(res.data);

		 if(res.code==200){
			 tocenter();
		 }
	 })
        // this.userInfo = res.data
      } catch (error) {
        console.error('获取数据失败', error)
      }
    }
function tocenter(){
  wx.switchTab({
	  // /
    url: "/pages/main/index",
    fail: (err) => {
      console.log('跳转失败详情:', err);
      uni.showToast({
        title: '跳转失败: ' + err.errMsg,
        icon: 'none'
      });
    },
    success: () => {
      console.log('跳转成功');
    }
  });
}
// 当前激活的 tab
const currentTab = ref('login');
const roles = [
  { label: '学生', value: '学生' },
  { label: '教师', value: '老师' }
];

// 登录数据
const loginData = ref({
	username: '',
	password: ''
});
const shuju= ref({
	code:'',
	encryptedData:'',
	iv:''
	
})

// 注册数据
const registerData = ref({
	username: '',
	password: '',
	role: '',
	phone: ''
});
// 处理角色选择变化
const handleRoleChange = (e) => {
  const value = e.detail.value;
  registerData.value.role = value;
};

// 切换 tab
function switchTab(tab) {
	currentTab.value = tab;
}


onMounted((options) => {
  console.log('页面加载', options)
})



</script>

<style scoped>
.container {
	padding: 40rpx;
}

.tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 60rpx;
}

.tabs text {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	color: #666;
	padding-bottom: 20rpx;
	border-bottom: 4rpx solid transparent;
}

.tabs text.active {
	color: #007AFF;
	border-color: #007AFF;
	font-weight: bold;
}

.form input {
	height: 80rpx;
	padding: 0 20rpx;
	border: 1rpx solid #ccc;
	border-radius: 8rpx;
	margin-bottom: 40rpx;
}

.form button {
	background-color: #007AFF;
	color: white;
}
</style>
